<template>
  <div class="updateModal">
    <a-modal :visible="updateUserModal" title="更新用户信息" @cancel="cancel" @ok="updateInfo">
      <a-form-model
        id="components-form-demo-normal-login"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="ruleForm"
        :model="userInfo"
        :rules="rules"
        class="login-form"
      >
        <a-form-model-item label="邮箱" prop="email">
          <a-input v-model="userInfo.email" :placeholder="this.curUserInfo.email">
            <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="用户名" prop="username">
          <a-input v-model="userInfo.username" :placeholder="this.curUserInfo.username">
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="联系方式" prop="phone">
          <a-input v-model="userInfo.phone" :placeholder="this.curUserInfo.phone">
            <a-icon slot="prefix" type="phone" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="职称" prop="job">
          <a-input v-model="userInfo.job" :placeholder="this.curUserInfo.job">
            <a-icon slot="prefix" type="solution" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="角色" prop="role">
          <a-select
            v-model="userInfo.roleName"
            :placeholder="this.curUserInfo.roleName"
            @select="selectedRole"
          >
            <a-icon slot="prefix" type="crown" style="color: rgba(0,0,0,.25)" />
            <a-select-option :value="item._id" v-for="item in roles" :key="item._id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getAllRole } from '@/network/role.js'
import { updateUserInfo } from '@/network/user.js'
export default {
  name: '',
  props: {
    curUserInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data () {
    return {
      updateUserModal: false,
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 15
      },
      userInfo: {
        username: '',
        email: '',
        phone: '',
        job: '',
        roleName: '',
        role_id: '',
        _id: ''
      },
      roles: [],
      destory: true,
      rules: {
        email: [
          { required: true, message: '请输入邮箱!' },
          { type: 'email', message: '邮箱格式有误!' },
          { validator: this.EmailValidator }
        ],
        username: [
          { required: true, message: '请输入用户名!' },
        ],
        phone: [
          { required: true, message: '请输入联系方式!' },
          { validator: this.MobileNumberValidator }
        ],
        job: [
          { required: true, message: '请输入职称!' },
        ]
      },
    };
  },
  watch: {
    curUserInfo (val) {
      this.userInfo = {
        username: val.username,
        email: val.email,
        phone: val.phone,
        job: val.job,
        roleName: val.roleName,
        role_id: val.role_id,
        _id: val._id
      }
    }
  },
  computed: {

  },
  mounted () {
    this.getAllRole()
  },
  methods: {
    cancel () {
      this.updateUserModal = false
    },
    show () {
      this.updateUserModal = true
    },
    updateInfo () {
      console.log(this.userInfo)
      const curUserMsg = {
        username: this.userInfo.username,
        email: this.userInfo.email,
        phone: this.userInfo.phone,
        job: this.userInfo.job,
        role_id: this.userInfo.role_id,
        id: this.userInfo._id,
      }
      updateUserInfo(curUserMsg).then(res => {
        console.log(res)
        if (res.data.status === 200) {
          this.$message.success(res.data.msg)
          this.updateUserModal = false
          this.$emit("refreshTable")
        }
      })

    },
    //选中select下的一项options时的回调
    selectedRole (value) {
      console.log(value)
      this.userInfo.role_id = value
    },
    //请求获取所有角色
    async getAllRole () {
      const roleData = await getAllRole()
      if (roleData.status === 200) {
        this.roles = roleData.data.data
      } else {
        this.$message.error(roleData.data.msg)
      }
      console.log(this.roles)
    },
    // 手机号验证
    MobileNumberValidator (rule, value, callback) {
      const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/
      if (!idcardReg.test(value)) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
      // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
      callback()
    },
    // 邮箱验证
    EmailValidator (rule, value, callback) {
      const idcardReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      if (!idcardReg.test(value)) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
      // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
      callback()
    },
  },
  components: {

  },
};
</script>

<style scoped>
</style>
